<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common::head-js">
</head>
<body>
<script th:src="@{../myresource/vui/user/user.js}"></script>
<div>
    <!--内容区域-->
    <div class="lr-layout-wrap panel panel-body fa" style="margin: 5px 10px 5px 5px;width: 99%;">
        <div class="lr-layout-title">
            <i class="icon icon-user"></i>
            <span id="titleinfo">用户信息</span>
        </div>
        <div class="datagrid-tool-right">
            <div class="btn-group">
                <button shiro:hasPermission="user:add" class="btn" type="button" data-toggle="modal" data-target="#mymodel"><i class="icon icon-plus-sign"></i>添加用户</button>
                <button shiro:hasPermission="user:edit" class="btn" type="button" onclick="$.vui.loadUser('datagridExample');"><i class="icon icon-pencil"></i>编辑用户</button>
                <button shiro:hasPermission="user:delete" class="btn" type="button" onclick="$.vui.delUser('datagridExample');"><i class="icon icon-trash"></i>删除用户</button>
            </div>
        </div>
        <div class="lr-layout-body" style="padding-top: 28px; min-height: 0px;">
            <div class="mCustomScrollbar">
                <div id="datagridExample" class="datagrid datagrid-striped">
                    <div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample2" style="margin-bottom: 10px; max-width: 300px">
                        <input id="inputSearchExample2" type="search" class="form-control search-input" placeholder="搜索,用户名，联系电话，联系地址">
                        <label for="inputSearchExample2" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
                    </div>
                    <div class="datagrid-container"></div>
                    <div class="pager"></div>
                </div>
            </div>
        </div>
    </div>
    <!--对话框 用户信息-->
    <div class="modal fade" id="mymodel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title"> <i class="icon icon-user"></i>用户信息</h4>
                </div>
                <div class="modal-body">
                    <form th:action="@{../user/addOrupdate}" method="post" class="form-horizontal" id="userForm">
                        <div class="form-group">
                            <label for="exampleInputAccount4" class="col-sm-2">用户名</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="hidden" class="form-control" name="id">
                                <input type="text" class="form-control" id="exampleInputAccount4"  name="username" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputAccount1" class="col-sm-2">密码</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="password" class="form-control" id="exampleInputAccount1"  name="passward"  placeholder="密码" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputAccount2" class="col-sm-2">通信地址</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="text" class="form-control" id="exampleInputAccount2" name="address" placeholder="通信地址" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputAccount3" class="col-sm-2">邮箱</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="email" class="form-control" id="exampleInputAccount3" name="email" placeholder="邮箱" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputAccount5" class="col-sm-2">联系电话</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="text" class="form-control" id="exampleInputAccount5" name="phone" placeholder="联系电话" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2">选择角色</label>
                            <div class="col-md-6 col-sm-10" id="roles">
                                <label class="checkbox-inline" th:each="r:${role}">
                                    <input type="checkbox" th:value="${r.id}" th:text="${r.roledesc}" name="roleId"/>
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" onclick="$.ft.reset('userForm')">重置</button>
                            <button type="button" class="btn btn-primary" onclick="$.ft.submitForm('userForm','datagridExample');" data-dismiss="modal">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    var userRole=[[${role}]];
    $vui.Loading("拼命加载中，请稍后...",{overlay:true,timeout:0,icon:"icon icon-spin icon-spinner-indicator"});
    $vui.loadState();
    $(function () {
        $.vui.load();
    });
    /*]]>*/
</script>
</html>